{extend name='layout:app'}

{block name='css'}
<link rel="stylesheet" href="__STATIC__/css/dropload.css">
<script src="__STATIC__/js/dropload.js"></script>
<link rel="stylesheet" href="__STATIC__/css/mycode.css">
{/block}

{block name='content'}
    <div id="app">
        <div class="nav">
            <i class="el-icon-arrow-left icon_left" @click="back"></i>
            <div>我的取件码</div>
            <i class="iconfont icon-home icon_right" @click="home"></i>
        </div>

        <div class="code">
            <div class="code-cont">
<!--                <el-checkbox v-model="allChecked" style="margin-bottom: 10px" @change="checkAllChange">全选</el-checkbox>-->
                <div class="item" v-for="item in codeList" style="padding: 18px 0px;">
<!--                    <div style="flex: 0 0 10px">-->
<!--&lt;!&ndash;                        <el-checkbox v-model="item.checked" @change="currChange"></el-checkbox>&ndash;&gt;-->
<!--                        <el-checkbox class="checklist" v-model="userList" @change="groupChange"></el-checkbox>-->
<!--                    </div>-->
                        <div class="icon-code" @click="showCode(item)" style="flex: 0 0 60px;"><i class="iconfont icon-qrcode" style="font-size: 60px;"></i></div>
                        <div class="code-info" @click="showCode(item)" style="margin-left: 1%;">
                            <div class="code-num" style="font-size: 16px">
                                取件码编号：
                                <div class="code-num-info" style="margin-top: 10px">{{item.billcode}}</div>
                            </div>
                            <div class="time">{{item.create_time}}</div>
                        </div>
                    <!--<div class="show"><el-button type="primary">查看</el-button></div>-->
                    <div style="text-align: center;flex: 1;" v-if="item.order_status">
                        <el-button type="primary" @click="btnOrder(item.id)" style="padding: 5px 3px;" >帮我取件</el-button>
                    </div>
                </div>
                <div v-show="!codeList.length" style="text-align: center;line-height: 35px;">
                    <p>亲，你目前还没有取件码哦!</p>
                    <p>请前往<a href="/index/services/qrcodePay" style="font-size: 18px;color:#66b1ff;">生成取件码</a>页面，生成你的取件码</p>
                </div>
                <div style="text-align: center;font-size: 12px;">若需下单，请选择相应二维码</div>
<!--                <div style="margin-top: 50px;text-align: center">-->
<!--                    <el-button type="primary" @click="btnOrder">帮我取件</el-button>-->
<!--                </div>-->
            </div>
        </div>
    </div>
{/block}

{block name='js'}
<script>
    var that;
    var page = -1;

    new Vue({
        el:'#app',
        data: {
            codeList: [],
            codeNoList: [],
            allChecked: false,
            userList:[]
        },
        created() {
            that = this  //生成vue副本
            $.get('/index/person/getcode',function (res) {
                console.log(res.data)
                if(res.code === 0) {
                    that.codeList = res.data
                }
            })
        },
        methods: {
            back() {
                window.history.go(-1)
            },
            home() {
                location.href = '/'
            },
            showCode(item) {
                // sessionStorage.setItem('codeUrl', item.codeUrl)
                window.location.href = `showCode.html?codeNum=${item.billcode}`
            },
            btnOrder(id) {
                // if(!this.codeNoList.length) {
                //     alert('请选择取件码!')
                //     return
                // }
                // $.get('/index/sender/checkQrcode',{code: that.codeNoList},function (res) {
                //     console.log(res)
                //     if(res.code === -1) {
                //         alert(`您的编号为${res.data}的取件码已发出取件服务，请重新选择`)
                //     }else {
                        location.href = '/index/services/onsiteService?code='+id
                //     }
                // })
            }
        },
        watch: {
            'codeList': { //监听取件码选择变化
                deep: true,
                handler: (newVal, oldVal) => {
                    for(item of newVal) {
                        var _index = that.codeNoList.indexOf(item.billcode)
                        if(item.checked && _index === -1) {
                            that.codeNoList.push(item.billcode)
                        }else if(!item.checked && _index !== -1){
                            that.codeNoList.splice(_index,1)
                        }

                    }
                }
            }
        }
    });
</script>
{/block}